<template>
  <div>
        <div style="display: flex;">
            <bar-com title="统计" :xArr="xArr" :serData="serArr"></bar-com>
            <pie-com title="总体统计" :pieData="pieArr">

            </pie-com>
           
        
          
        </div>
        <!-- 百度地图 -->
        <div id="mymap">
            <baidu-map class="mybaidu" 
              center="河北省廊坊市进思教育"
              zoom="17"
              scroll-wheel-zoom="true" 
              dragging="true">
              <!-- 缩放控件 -->
               <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
              <!-- 地图类型控件 -->
              <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
                <!-- 后台定位控件 -->
               <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
               <!-- 比例尺控件 -->
                 <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
                 <!-- 检索控件 -->
                 <bm-local-search :keyword="keyword" :auto-viewport="true" :location="location"></bm-local-search>

            </baidu-map>
        </div>
        <!-- 折线图 -->
        <div>
           <line-com :xArr="xList" :serData="serData"></line-com>
        </div>
  </div>
</template>

<script>
import {getAdminList} from '../../api/admin.js'
import {getStuApi} from '../../api/student.js'
import {VideoListApi} from '../../api/video.js'
import {getCourseList} from '../../api/course.js'


import barCom from '../Charts/bar'
import pieCom from '../Charts/pie'
import lineCom from '../Charts/line'
export default {
  name: 'JsxyIndex',
  components:{barCom,pieCom,lineCom},
  data() {
    return {
      location:"北京",
      keyword:"百度",
        xArr:["管理员数","学员数","视频数","课程数"],
        serArr:[],
        pageStart:1,
        pieArr:[], //饼图的数据
        allCourseData:[],//所有课程的数据
        pageTotal:2,//总共有多少页课程
        qianArr:[],//前端每天课程数量
        houArr:[],//后端每天课程数量
        shiArr:[]//视觉设计每天的数量
    };
  },
  
  created(){
    this.getAllCount();
  },
  mounted() {
    this.getCourse()
  },
  computed:{
    xList(){ //x轴数据
      let arr=this.allCourseData.map(item=>{
         return  new Date(item.createAt).toLocaleDateString().substr(5)
      })
      console.log(arr)
      let arr1=new Set(arr);
      console.log(Array.from(arr1),"------------")
      return Array.from(arr1) 
    },
    serData(){
        let qianNum=0;
        let houNum=0;
        let shiNum=0;
          this.xList.forEach(item=>{
            //item--每天的日期
             this.allCourseData.forEach(myitem=>{
                  // myitem--每个课程
                  if(item==new Date(myitem.createAt).toLocaleDateString().substr(5)){
                    if(myitem.CategoryOne=='1'){
                      qianNum++
                    }
                    if(myitem.CategoryOne=='2'){
                      houNum++
                    }
                     if(myitem.CategoryOne=='3'){
                      shiNum++
                    }
                  }

              })
              this.qianArr.push(qianNum)
              this.houArr.push(houNum)
              this.shiArr.push(shiNum)
              qianNum=0;
              houNum=0;
              shiNum=0;
          })
          console.log(this.qianArr,this.houArr,this.shiArr)
          return [this.qianArr,this.houArr,this.shiArr]
     
    }
  },
  methods: {
   async  getCourse(){ //获取课程
         if(this.pageStart>= this.pageTotal){
              return false
          }
          let res=await getCourseList({pageStart:this.pageStart})
            
          // 总页码
          this.pageTotal= Math.ceil(res.data.data.count/  res.data.data.pageSize)
         
          // 连接返回的数据
          this.allCourseData=this.allCourseData.concat(res.data.data.list)
          this.pageStart++;
          console.log( this.allCourseData)
          // 自己调用自己
          this.getCourse();

    },
    getAllCount(){ 
      //一次请求四个接口
        Promise.all([
            getAdminList({pageStart:1}),
            getStuApi({pageStart:1}),
            VideoListApi({pageStart:1}),
            getCourseList({pageStart:1})
        ]).then(res=>{
            console.log(res)
            // 
            this.serArr=res.map(item=>{
                return item.data.data.count
            })
            console.log( this.serArr)

            this.pieArr=res.map((item,index)=>{
              item.name=this.xArr[index]
              item.value=item.data.data.count
              return item  
            })
            console.log( this.pieArr)
          
      })
    },
  }
}
</script>
<style lang="less">
  #mymap
  {
    width:80%;
    height:400px;
    .mybaidu{
         width:100%;
        height:400px;
        margin: 20px auto;
    }
  }
</style>